<template>
<div>
  <p>用户名：<input type='text' v-model="loginForm.username"></p>
  <p>密码：<input type='text' v-model="loginForm.password"></p>
  <button @click="login">登录</button>
</div>
</template>
<script>
import { mapActions,mapGetters } from 'vuex'
import axios from 'axios'
 export default {
  data() {
    return {
     loginForm:{
       username:'',
       password:''
     }
    }
  },
  created() {
      
  },
  methods: {
    ...mapActions( ['changeToken']),
    login(){
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('账号或密码不能为空');
      }else{
        axios({
          method:'post',
          url:'https://easy-mock.com/mock/5d15ee44beb3d734b9e9eca0/example/login',
          params:{
            name:this.loginForm.username
          }
        }).then((data)=>{
            let data1 = data
            console.log(data1)
            this.changeToken(data1.token)//将token存储在vuex里
            localStorage.setItem('easytoken',data1.token)//本地存储
            this.$router.push('/index')
        })
      }
    }
  },
  computed: {
    ...mapGetters( ['getTokens'] )
  },
}
</script>